<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache,no-store">
    <meta http-equiv="expires" content="0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>大转盘</title>
    <meta name="description" content="大转盘" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jDh3pZvkeqUnuKmWZeyEZSuD0GgpoeSq"></script>
    <link rel="stylesheet" href="../common/css/modal-px.css" media="screen" title="no_title" charset="utf-8">
    <link rel="stylesheet" href="../common/css/plugins.css" media="screen" title="no_title" charset="utf-8">
    <style media="screen" title="no_title">@charset "UTF-8";input{-webkit-appearance: none;}.clear:after{content:'';display:block;clear:both;width:0;height:0}body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0}ul,ol{list-style-type:none}select,input,img,select{vertical-align:middle}*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(255,255,255,0);font-family:PingFang SC,STHeiti,"Microsoft Yahei","微软雅黑",Helvetica,sans-serif;-webkit-touch-callout:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;outline:0}a:active,a:hover,a:link,a:visited{text-decoration:none;outline:0}ul,li{list-style:none}html,body{width:100%;font-size:20px;background-color:#f0f0f0}html,body{background-color:#eb3839}body{background-color:#eb3839}.wrap{width:100%;min-height:100vh;background:url(./img/turnplate-bg.png) no-repeat top center;background-size:100% auto;background-color:#eb3839;padding-top:5.3rem;padding-bottom:.5rem;vertical-align:top}.wrap .turnplate{display:block;width:85%;margin:0 auto;position:relative;background:url(./img/turnplate.png) no-repeat 0 0;background-size:99.7% auto}.wrap .turnplate canvas.item{width:100%}.wrap .turnplate img.pointer{position:absolute;left:38.95%;top:31.5%;width:22%}.wrap .content .times{text-align:center;color:#ffc261;font-size:.6rem;padding:.5rem .25rem .6rem}.wrap .content .links{position:relative}.wrap .content .links .my-prize{display:block;text-align:center;width:5.8rem;height:1.65rem;line-height:1.65rem;font-size:.75rem;color:#9b4d0f;background-color:#ffda0f;-webkit-border-radius:.15rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;border-radius:.2rem;margin:0 auto}.wrap .content .links .my-prize:active{background-color:#f3d00b}.wrap .content .links .rules{color:#e2b4a3;font-size:.65rem;line-height:1.65rem;text-decoration:underline;position:absolute;right:9%;top:0}.wrap .content .links .rules:active{color:#f0c3af}.wrap .content .links .arrow{width:.7rem;height:.4rem;display:block;margin:0 auto;background:url(./img/down-arrow.png) no-repeat center;background-size:100%;margin-top:.4rem}.wrap .content .links .tips{font-size:.6rem;color:#e2b4a3;text-align:center;padding:.4rem .25rem 0}.wrap .content .links .tips i{color:#ffda0f;font-style:normal}.wrap .content .winners{width:13.85rem;margin:1.05rem auto;background-color:#fbf0f0;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;border-radius:.2rem;padding:.4rem;position:relative}.wrap .content .winners .title{font-size:.75rem;width:4.75rem;height:1.25rem;position:absolute;top:-.45rem;left:50%;transform:translate3D(-2.375rem,0,0);-ms-transform:translate3D(-2.375rem,0,0);-moz-transform:translate3D(-2.375rem,0,0);-webkit-transform:translate3D(-2.375rem,0,0);-o-transform:translate3D(-2.375rem,0,0);margin:0 auto;line-height:1.25rem;text-align:center;color:#fffaf4;-webkit-border-radius:1.25rem;-moz-border-radius:1.25rem;-ms-border-radius:1.25rem;-o-border-radius:1.25rem;border-radius:1.25rem;background-color:#ffb30f}.wrap .content .winners ul{border:1px dashed #eba09f;padding:1.25rem;color:#944d0f;font-size:.65rem;line-height:.85rem}.wrap .content .winners ul li{margin-bottom:1rem;-webkit-box-orient:horizontal;-ms-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;-moz-flex-flow:row nowrap;flex-flow:row nowrap;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.wrap .content .winners ul li:last-child{margin-bottom:0}.wrap .content .winners ul li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.wrap .content .winners ul li span:first-child{margin-right:.25rem}.wrap .content .winners ul li span:last-child{text-align:right;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.bombBox{width:100vw;height:100vh;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.4);padding:0 1.75rem;display:none;z-index:100}.bombBox.show{display:block}.bombBox:after{content:'';display:block;clear:both;width:0;height:0}.bombBox .close{width:1.05rem;height:3.425rem;background:url(./img/red-close.png) no-repeat bottom center;background-size:100% auto;margin-bottom:1.25rem;float:right}.bombBox .boxContent{width:100%;background:#fff;-webkit-border-radius:.15rem;-moz-border-radius:.15rem;-ms-border-radius:.15rem;-o-border-radius:.15rem;border-radius:.15rem;float:right;padding:0 .975rem 1.35rem}.bombBox .boxContent h3{text-align:center;font-size:.8rem;font-weight:500;padding:.6rem 0}.bombBox .boxContent button{width:6.95rem;height:1.55rem;line-height:1.55rem;outline:0;display:block;background:#fb3131;color:#fff;font-size:.7rem;text-align:center;font-weight:500;margin:1.5rem auto 0;border:0;-webkit-border-radius:.15rem;-moz-border-radius:.15rem;-ms-border-radius:.15rem;-o-border-radius:.15rem;border-radius:.15rem}.bombBox .boxContent form input{border: 1px solid rgb(229,229,229);display:block;font-size:.65rem;width:100%;height:1.55rem;margin-top:.6rem;padding:0 .5rem;outline:0;-webkit-border-radius:.15rem;-moz-border-radius:.15rem;-ms-border-radius:.15rem;-o-border-radius:.15rem;border-radius:.15rem}.bombBox.success .boxContent{height:12.5rem;background:url(./img/success-bg.png) no-repeat center;background-size:100% 100%}.bombBox.success .boxContent .prizeName{text-align:center;font-size:.7rem;color:#fff;margin-top:3rem}.bombBox.success .boxContent .imgs{margin-top:.85rem}.bombBox.success .boxContent .prizeImg{width:3rem;height:3rem;display:block;margin:0 auto;background-color:#fff;-webkit-border-radius:.15rem;-moz-border-radius:.15rem;-ms-border-radius:.15rem;-o-border-radius:.15rem;border-radius:.15rem}.bombBox.success .boxContent .sponsorImg{width:3rem;height:1.25rem;display:block;margin:0 auto;background-color:#fff;margin-top:.25rem}.bombBox.success .boxContent button{margin-top:.6rem}.bombBox.fail .boxContent{height:12.5rem;background:url(./img/fail-bg.png) no-repeat center;background-size:100% 100%}.bombBox.fail .boxContent button{margin-top:9rem}#main{display:none;}</style>
</head>
<body style="visibility: hidden;">
<div class="wrap" id="main">
    <div class="turnplate">
        <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
        <img class="pointer" src="./img/pointer.png" alt="award rotation start"/>
    </div>
    <div class="content">
        <div class="times">你还有0次机会哦!</div>
        <div class="links">
            <a class="my-prize" href="/act/common/prizes.html">我的奖品</a>
            <a class="rules" href="/act/roulette/rule.html">活动规则</a>
            <!--<a class="arrow"></a>-->
            <div class="tips">您是第<i>24897328</i>位参与者</div>
        </div>
        <!--<div class="winners">-->
        <!--<div class="title">中奖名单</div>-->
        <!--<ul id="winners">-->
        <!--&lt;!&ndash;<li>&ndash;&gt;-->
        <!--&lt;!&ndash;<span>简爱</span>&ndash;&gt;-->
        <!--&lt;!&ndash;<span>三星平板一台三星平板一台三星平板一台三星平板一台</span>&ndash;&gt;-->
        <!--&lt;!&ndash;</li>&ndash;&gt;-->
        <!--</ul>-->
        <!--</div>-->
    </div>
    <div id="statement" style="display:none;text-align:center;width:100%;font-size: 12px;background-color:#fff;height:30px;line-height:30px;">所有活动及奖品与苹果公司无关。</div>
    <div style="display:none;width:0;height:0;">
        <img src="./img/fail-bg.png"/>
        <img src="./img/success-bg.png"/>
        <div id="container"></div>
    </div>
</div>
<div class="bombBox address">
    <div class="close"></div>
    <div class="boxContent">
        <h3>收货信息</h3>
        <form>
            <input type="text" name="name" placeholder="姓&nbsp;&nbsp;名"/>
            <input type="text" name="mobile" placeholder="联系电话"/>
            <input type="text" name="address" placeholder="地&nbsp;&nbsp;址"/>
            <button class="submit">提交</button>
        </form>
    </div>
</div>
<div class="bombBox success">
    <div class="close"></div>
    <div class="boxContent" id="prizeInfo"></div>
</div>
<div class="bombBox fail">
    <div class="close"></div>
    <div class="boxContent">
        <button id="keep">继续抽奖</button>
    </div>
</div>
<script type="text/template" id="winners-template">
    {{each data as item i}}
    <li>
        <span>{{item.name}}</span>
        <span>{{item.prize.name}}</span>
    </li>
    {{/each}}
</script>
<script type="text/template" id="prizeInfo-template">
    <div class="prizeName">{{prize.name}}</div>
    <div class="imgs">
        <img class="prizeImg" src="{{prize.image}}"/>
        <img class="sponsorImg" src="{{randomSponsor.logo}}"/>
    </div>
    <button id="fetch" class="{{prize.type_code=='coupon'?'coupon':'entity'}}">领取奖品</button>
</script>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 针对uc横竖屏rem html没有重绘的问题
                var style;
                if (style = document.getElementById("forhtml")) {
                    style.parentNode.removeChild(style);
                }
                style = document.createElement("style");
                style.id = "forhtml";
                document.head.appendChild(style);
                style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
            };
        recalc();
        document.body.style.visibility = 'visible';
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener('touchstart', function () {
            }, false);
        }
    })(document, window);
</script>
<script type="text/javascript" charset="utf-8" src="../common/lib/zepto.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/lib/zepto-adapter.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/lib/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/modal.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/utils.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/GeoUtils.js"></script>
<script type="text/javascript" charset="utf-8" src="./js/awardRotate.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="../common/js/weixinshare.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var isWechat = false,isAPP = false,isFollow = false,isCode=false,isPart=false,activities={};
        // 转盘区域
        var turnplate = {
            restaraunts: [], //大转盘奖品名称
            colors: [], //大转盘奖品区块对应背景颜色
            outsideRadius: 178, //大转盘外圆的半径
            textRadius: 115, //大转盘奖品位置距离圆心的距离
            insideRadius: 46, //大转盘内圆的半径
            startAngle: 0, //开始角度

            bRotate: false //false:停止;ture:旋转
        };
        var colors = ["#FEEF9D", "#FFDD76"];
        //所有奖品  展示名数组  数组关联
        var allPrizes=[],alias_nameArray = [];
        judgeSignPass(function(){
            requestAllowed('roulette',function(data){
                if(allowed.type=='no-login'){
                    $('.content .times').text('你还没有登录哦!');
                }else{
                    $('.content .times').text('你还有'+allowed.surplus_times+'次机会哦!');
                }
            });
        });
        requestActInfo('roulette',function(data){
            $('#main').show();
            $('.tips i').text(data.participants+1);
            if(data.activity.background_img){
                $('.wrap').css({
                    'background': 'url('+data.activity.background_img+') no-repeat center top',
                    'background-size': '100% auto',
                });
            }
            //===============================
            activities = data.activity;
            isWechat = (window.parameter.ways == 'wechat');//是否开启微信
            isAPP = (activities.publishing.app.is_open =='on');//是否开启APP
            isFollow = (window.parameter['following']!=1);//是否关注
            isCode = Boolean(activities.publishing.wechat.qr_code[0]);//是否上传二维码
            if(isWechat){
                if(isFollow){
                    isPart = true;
                }else{
                    if(isCode){
                        var qrCode = QRCode(activities.publishing.wechat.qr_code[0]).open();
                    }else{
                        isPart = true;
                    }
                }
            }else{
                //APP
            }
            //===========================
        });
        requestPrizes(function(data){
            allPrizes = data;
            for(var i=0;i<data.length;i++){
                alias_nameArray.push(data[i].alias_name?data[i].alias_name:'');
            }
            Turnplate(alias_nameArray);
        });
//        requestWinners(true,function(data){
//            $('#winners').html(template('winners-template',data));
//        });
        //跳转-活动规则
        $('a.rules').attr('href','/act/roulette/rule.html'+location.search);
        //跳转-我的奖品
        $('a.my-prize').click(function(e){
            e.preventDefault();
            e.stopPropagation();
            if(!window.parameter['uid']){
                window.location.href = window.location.href + '&noLogin=true';
            }else{
                location.href = '/act/common/prizes.html'+location.search;
            }
        });
        $('.bombBox .close,#keep').on('click',function(e){
            $(this).parents('.bombBox').removeClass('show');
        });
        //打开填写信息弹框
        $('button#fetch').click(function(e){
            if($(this).hasClass('coupon')){
                location.href = '/act/common/prizes.html'+location.search;
            }else{
                $('.bombBox').removeClass('show');
                $('.bombBox.address').addClass('show');
            }
        });
        //提交填写信息
        var $name = $('.bombBox.address input[name=name]');
        var $mobile = $('.bombBox.address input[name=mobile]');
        var $address = $('.bombBox.address input[name=address]');
        $('button.submit').click(function(e){
            e.preventDefault();
            e.stopPropagation();
            var name = $.trim($name.val());
            var mobile = $.trim($mobile.val());
            var address =  $.trim($address.val());
            postUserInfo({name: name,mobile: mobile, address: address,prize_id:drawReturn.prize.id,id:drawReturn.prize.draw_id},function(){return true;},function(data){
                if (data.code == 200) {
                    setTimeout(function(){
                        $('.bombBox.address').removeClass('show');
                        $name.val('');
                        $mobile.val('');
                        $address.val('');
                    },1000);
                }
            });
        });
        //主回调
        function mainCallback(){
            requestActInfo('roulette',function(data){
                $('.tips i').text(data.participants+1);
                if(data.activity.background_img){
                    $('.wrap').css({
                        'background': 'url('+data.activity.background_img+') no-repeat center top',
                        'background-size': '100% auto',
                    });
                }
                //===============================
                activities = data.activity;
                isWechat = (window.parameter.ways == 'wechat');//是否开启微信
                isAPP = (activities.publishing.app.is_open =='on');//是否开启APP
                isFollow = (window.parameter['following']!=1);//是否关注
                isCode = Boolean(activities.publishing.wechat.qr_code[0]);//是否上传二维码
                if(isWechat){
                    if(isFollow){
                        isPart = true;
                    }else{
                        if(isCode){
                            var qrCode = QRCode(activities.publishing.wechat.qr_code[0]).open();
                        }else{
                            isPart = true;
                        }
                    }
                }else{
                    //APP
                }
                if (typeof wxshare != 'undefined' && (activities.shares.isopen == 'on' || activities.shares.isopen == '1')) {
                    var shareLink = '';
                    if(isWechat){
                        shareLink =window.location.origin+'/wechat/shares?id='+window.parameter.act_id;
                    }else{
                        shareLink = window.location.origin + location.pathname + '?act_id=' + wxshare.getUrlParam('act_id');
                    }
                    wxshare.share({
                        title: activities.name,
                        desc: activities.shares.content,
                        link: shareLink,
                        imgUrl: activities.shares.thumb,
                    });
                }
                //===========================
            });
            requestPrizes(function(data){
                allPrizes = data;
                for(var i=0;i<data.length;i++){
                    alias_nameArray.push(data[i].alias_name?data[i].alias_name:'');
                }
                Turnplate(alias_nameArray);
            });
            requestWinners(true,function(data){
                $('#winners').html(template('winners-template',data));
            });
            if(act_info.activity.rules.is_spot) {
                Geolocation(function (rPoint) {
                        isInCircle = isPointInCircle(rPoint, act_info.activity.rules);
                });
            }
        }
        function Turnplate(prizes){
            var array = JSON.parse(JSON.stringify(prizes));
            array.unshift('谢谢参与');
            var str = '谢谢参与';
            switch(prizes.length){
                case 1:
                    turnplate.restaraunts = Array.prototype.concat(array,array,array);
                    break;
                case 2:
                    turnplate.restaraunts = Array.prototype.concat(array,array);
                    break;
                case 3:
                    turnplate.restaraunts = Array.prototype.concat(array,array);
                    break;
                case 4:
                    turnplate.restaraunts = Array.prototype.concat(array.slice(0,3),[str],array.slice(3,5));
                    break;
                case 5:
                    turnplate.restaraunts = array;
                    break;
            }
            if(turnplate.restaraunts.length==6){
                turnplate.colors =  Array.prototype.concat(colors,colors,colors);
                turnplate.startAngle = Math.PI*(60/360);
            }else if(turnplate.restaraunts.length==8){
                turnplate.colors =  Array.prototype.concat(colors,colors,colors,colors);
            }
            console.log(turnplate.restaraunts);
            //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
            drawRouletteWheel();
        }
        var rotateTimeOut = function() {
            $('#wheelcanvas').rotate({
                angle: 0,
                animateTo: 2160,
                duration: 8000,
                callback: function() {
                    $.alert('网络超时，请检查您的网络设置！');
                }
            });
        };

        //旋转转盘 item:奖品位置; txt：提示语;
        var rotateFn = function(item, data) {
            if(turnplate.restaraunts.length==6){
                var angles = 180+ 360 / (turnplate.restaraunts.length * 2)-item*(360/turnplate.restaraunts.length);
//                if(allPrizes.length==1){
//                    var angles = -item*(360/turnplate.restaraunts.length)-(360 / (turnplate.restaraunts.length * 2));
//                }else if(allPrizes.length>=4){
//                    var angles =180+ 360 / (turnplate.restaraunts.length * 2)-item*(360/turnplate.restaraunts.length);
//                }else{
//                    var angles = (1-item)*(360/turnplate.restaraunts.length)-(360 / (turnplate.restaraunts.length * 2));
//                }
            }else if(turnplate.restaraunts.length==8){
                var angles = (2-item)*(360/turnplate.restaraunts.length)-(360 / (turnplate.restaraunts.length * 2));
            }
            if(angles<0){
                angles = 360 + angles;
            }
            console.log(angles);
            $('#wheelcanvas').stopRotate();
            $('#wheelcanvas').rotate({
                angle: 0,
                animateTo: angles + 2160,
                duration: 8000,
                callback: function() {
                    if(!drawReturn.is_winning) {
                        $('.bombBox.fail').addClass('show');
                    }else{
                        $('.bombBox.success').addClass('show');
                        drawReturn.randomSponsor = drawReturn.prize.sponsors[Math.floor(Math.random()*drawReturn.prize.sponsors.length)];
                        $('#prizeInfo').html(template('prizeInfo-template',drawReturn));
                        $('button#fetch').click(function(e){
                            $('.bombBox').removeClass('show');
                            if(drawReturn.prize.type_code=='entity'){
                                $('.bombBox.address').addClass('show');
                            }else{
                                location.href = '/act/common/prizes.html' + location.search;
                            }
                        });
                    }
                    turnplate.bRotate = !turnplate.bRotate;
                }
            });
        };
        //点击抽奖事件
        var drawReturn = '';
        $('.pointer').click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            if(!isPart){
                if(isSignPass == -2){
                    if (activities.publishing.app.app_urls[0]) {
                        $.confirm('请下载APP参与活动?',
                            function () {
                                location.href = activities.publishing.app.app_urls[0];
                            },
                            function () {
                            }
                        );
                    } else {
                        $.alert('请下载APP参与活动');
                    }
                    return;
                }
                if(isSignPass == -1) {
                    window.location.href = window.location.href + '&noLogin=true';
                    return;
                }
                if(isSignPass == 0){
                    $.alert('非法请求，请在App中打开');
                    return;
                }
            }
            if(act_info.activity.rules.is_spot&&!isInCircle){
                $.toast('不在范围内哦~~');
                return;
            }
            if (turnplate.bRotate) return;
            turnplate.bRotate = !turnplate.bRotate;
            requestDraw({
                act_id: window.parameter['act_id'],
                uid:  window.parameter['uid'],
                type: 'roulette'
            },function(data){
                drawReturn = data;
                $('.content .times').text('你还有'+data.surplus_times+'次机会哦!');
                var winPrizeName = '',winPrizesArray=[];
                if(!data.is_winning){
                    winPrizeName = '谢谢参与';
                }else{
                    for(var i=0;i<allPrizes.length;i++){
                        if(data.prize.id==allPrizes[i].id){
                            winPrizeName = allPrizes[i].alias_name;
                            break;
                        }
                    }
                }
                for(var j=0;j<turnplate.restaraunts.length;j++){
                    if(winPrizeName==turnplate.restaraunts[j]){
                        winPrizesArray.push(j);
                    }
                }
                //获取随机数
                var item = getRandomItem(winPrizesArray);
                console.log(item);
                //奖品数量
                rotateFn(item, turnplate.restaraunts[item]);
            },function(data){
                $('.content .times').text('你还有'+data.surplus_times+'次机会哦!');
            });
        });
        function getRandomItem(array){
            return  array[Math.floor(Math.random()*array.length)];
        }
        function drawRouletteWheel() {
            var canvas = document.getElementById("wheelcanvas");
            if (canvas.getContext) {
                //根据奖品个数计算圆周角度
                var arc = Math.PI / (turnplate.restaraunts.length / 2);
                var ctx = canvas.getContext("2d");
                //在给定矩形内清空一个矩形
                //ctx.clearRect(0,0,422,422);
                //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
                ctx.strokeStyle = "#FFBE04";
                //font 属性设置或返回画布上文本内容的当前字体属性
                ctx.font = '16px Microsoft YaHei';
                for (var i = 0; i < turnplate.restaraunts.length; i++) {
                    var angle = turnplate.startAngle + i * arc;
                    ctx.fillStyle = turnplate.colors[i];
                    ctx.beginPath();
                    //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
                    ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
                    ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
                    ctx.stroke();
                    ctx.fill();
                    //锁画布(为了保存之前的画布状态)
                    ctx.save();

                    //----绘制奖品开始----
                    ctx.fillStyle = "#fff";
                    var text_allin = turnplate.restaraunts;
                    console.log(text_allin.indexOf("8"));
                    var text = turnplate.restaraunts[i];
                    var line_height = 17;
                    //translate方法重新映射画布上的 (0,0) 位置
                    ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
                    console.log((angle + arc / 2 + Math.PI / 2));
                    //rotate方法旋转当前的绘图
                    ctx.rotate(angle + arc / 2 + Math.PI / 2 - 1.64); //-1.64定位

                    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                    ctx.fillStyle = "#BC6619";
                    ctx.textAlign = "center";
                    if(turnplate.restaraunts.length==6){
                        ctx.rotate(90* Math.PI/180);
                        ctx.font = 'bold 24px Microsoft YaHei';
                        ctx.fillText(text, 0, 0);
                    }else if(turnplate.restaraunts.length==8){
                        ctx.font = 'bold 24px Microsoft YaHei';
                        ctx.fillText(text, 0, 8);
                    }
                    //把当前画布返回（调整）到上一个save()状态之前
                    ctx.restore();
                    //----绘制奖品结束----
                }
            }
        }
    });
</script>
</body>
</html>